<template>
  <div class="autoweb">
    <el-container>
      <el-header>
        <el-row>
          <el-col :xl="20" :lg="18" :md="16">
            <el-menu
                :default-active=this.$route.name
                active-text-color="#0080FF" background-color="#040813" mode="horizontal"
                text-color="#ccc">
              <el-menu-item index="Login" @click="toHome">首页</el-menu-item>
              <el-menu-item index="Task" @click="toTack">竞赛</el-menu-item>
              <el-menu-item index="Message" @click="toMessage">公告</el-menu-item>
              <el-menu-item index="toAutoPage" @click="toAutoPage">配置检测</el-menu-item>
            </el-menu>
          </el-col>
        </el-row>
      </el-header>
      <el-main>
        <el-row type="flex" justify="center">
          <el-col :span="10">
            <div style="display: flex;justify-content: center;margin-bottom: 50px">
              <h1>配置检测</h1>
            </div>
            <div data-title style="width: 100%;display: flex;justify-content: center;margin-bottom: 30px">
              <el-select v-model="uploadType" placeholder="请选择" @change="selectBtn">
                <el-option
                    v-for="item in uploadTypeList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div style="display: flex;justify-content: center">
              <el-upload
                  action="/v2/api/autofirewallfile"
                  :limit="1"
                  :with-credentials='true'
                  :on-success="OnSuccess"
                  :file-list="fileList"
                  :data="uploadData"
              >
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传txt配置文件！</div>
              </el-upload>
            </div>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "AutoWeb",
  data() {
    return {
      url: '',
      fileList: [],
      fileList1: [],
      uploadData: {"con": ''},
      uploadType: '',
      uploadTypeList: [
        {
          value: 'switchboard',
          label: '交换机'
        }
      ]
    }
  },
  methods: {
    toHome() {
      this.$router.push('/').catch(err => {
        console.log(err)
      })
    },
    toTack() {
      this.$router.push('/task').catch(err => {
        console.log(err)
      })
    },
    toMessage() {
      this.$router.push('/message').catch(err => {
        console.log(err)
      })
    },
    toAutoPage() {
      this.$router.push('/autoweb')
    },
    autoWeb() {
      this.$axios2.post('/autoweb', {
        'url': this.url
      }).then((res) => {
        let code = res.data.code
        if (code === 200) {
          this.$alert(code, '恭喜！', {
            confirmButtonText: '确定',
          });
        } else {
          this.$message.error('检测失败，请重新尝试一次或检查策略！');
        }
      })
    },
    OnSuccess(response) {
      this.fileList = []
      let code = response.code
      if (code === 200) {
        this.$alert(response.msg, '恭喜！', {
          confirmButtonText: '确定',
        })
      } else {
        this.$message.error('抱歉，您的配置错误，请返回设备中重新配置！');
      }
    },
    selectBtn() {
      console.log('this is btn')
      this.uploadData['con'] = this.uploadType
    }
  }
}
</script>

<style scoped>
.autoweb {
  background: url("~@/assets/login-background.png");
  min-height: calc(100vh);
  color: white;
}

/deep/ .el-input__inner {
  background-color: #0D1927;
  border: 1px solid #0080ff;
  color: white;
}

.button {
  width: 150px;
  border: none;
  font-size: 14px;
  height: 50px;
  background: url("~@/assets/admin-button.png");
  background-size: 100%, 100%;
  color: #ccc;
}

.logout {
  margin: 15px 0;
  width: 110px;
  border: none;
  font-size: 14px;
  margin-left: 20px;
  padding-right: 55px;
  height: 48px;
  background: url("~@/assets/button-left.png");
  background-size: 100%, 100%;
  color: #ccc;
}

.el-menu.el-menu--horizontal {
  border-bottom: none;
}

.el-upload-dragger {
  background-color: #2c3e50;
}
</style>